<template>
    <div class="time-picker-container">
      <button type="button" class="select-btn" @click="showPicker = true">
        {{ label }}<span class="time-display">{{ displayTime }}</span>
      </button>

      <div v-show="showPicker" class="picker-panel">
        <div class="picker-header">
          <h2 class="picker-title">{{ label }}</h2>
          <button type="button" @click="closePicker">×</button>
        </div>

        <div class="picker-columns">
          <div class="column-container date-column">
            <div class="mask top-mask"></div>
            <div class="mask bottom-mask"></div>
            <div class="column-wrapper" ref="dateColumn">
              <div v-for="date in dates"
                   :key="date.getTime()"
                   :class="['column-item', { selected: isDateSelected(date) }]"
                   @click="selectDate(date)">
                {{ formatDate(date) }}
              </div>
            </div>
          </div>

          <div class="column-container time-column">
            <div class="mask top-mask"></div>
            <div class="mask bottom-mask"></div>
            <div class="column-wrapper" ref="hourColumn">
              <div v-for="hour in hours"
                   :key="hour"
                   :class="['column-item', { selected: hour === selectedHour }]"
                   @click="selectHour(hour)">
                {{ hour.toString().padStart(2, '0') }}
              </div>
            </div>
          </div>

          <div class="column-container time-column">
            <div class="mask top-mask"></div>
            <div class="mask bottom-mask"></div>
            <div class="column-wrapper" ref="minuteColumn">
              <div v-for="minute in minutes"
                   :key="minute"
                   :class="['column-item', { selected: minute === selectedMinute }]"
                   @click="selectMinute(minute)">
                {{ minute.toString().padStart(2, '0') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

<script>
import { generateDates, generateHours, generateMinutes } from '../utils/dateUtils'

export default {
  props: {
    label: String,
    minDate: Date,
    minHour: Number,
    minMinute: Number
  },
  data () {
    return {
      showPicker: false,
      dates: [],
      hours: [],
      minutes: [],
      selectedDate: null,
      selectedHour: 0,
      selectedMinute: 0
    }
  },
  computed: {
    displayTime () {
      if (!this.selectedDate) return '请选择'
      return `${this.formatDate(this.selectedDate)} 
               ${this.selectedHour.toString().padStart(2, '0')}:
               ${this.selectedMinute.toString().padStart(2, '0')}`
    }
  },
  watch: {
    minDate: {
      immediate: true,
      handler (newVal) {
        this.dates = generateDates(newVal)
        this.selectedDate = this.dates[0]
        this.updateTimeOptions()
      }
    }
  },
  methods: {
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    isDateSelected (date) {
      return date.getTime() === this.selectedDate?.getTime()
    },
    selectDate (date) {
      this.selectedDate = date
      this.updateTimeOptions()
    },
    selectHour (hour) {
      this.selectedHour = hour
      this.updateMinutes()
    },
    selectMinute (minute) {
      this.selectedMinute = minute
    },
    updateTimeOptions () {
      this.hours = generateHours(this.selectedDate, this.minHour)
      this.selectedHour = this.hours[0]
      this.updateMinutes()
    },
    updateMinutes () {
      this.minutes = generateMinutes(this.selectedDate, this.selectedHour, this.minMinute)
      this.selectedMinute = this.minutes[0]
    },
    closePicker () {
      this.showPicker = false
      this.$emit('update', {
        date: this.selectedDate,
        hours: this.selectedHour,
        minutes: this.selectedMinute
      })
    },
    updateMinConstraints (date, hours, minutes) {
      // 更新最小时间限制
      this.$emit('update-constraints', {
        date,
        hours,
        minutes
      })
      this.updateTimeOptions()
    }
  }
}
</script>

  <style scoped>
  @import '../assets/styles/main.css';
  </style>
